// 定义一个全局变量 存储获取的数据结果
let goodsMsg;

// 1, 调用函数 动态渲染生成页面
setPage();

// 2, 事件委托添加点击事件
$('.product_image_area').click(function (e) {
    if (e.target.getAttribute('name') === '-') {
      console.log(111);
        // 点击的 - 按钮
        // 设定 input标签中的数值 是 本身数值 -1
        // 最小值 是 1
        // let res = $('.num').val() - 0 - 1 ;
        $('.num').val($('.num').val() - 0 - 1 <= 1 ? 1 : $('.num').val() - 0 - 1);

    } else if (e.target.getAttribute('name') === '+') {
        // 点击的 + 按钮
        // console.log(222);
        // 设定 input标签中的数值 是 本身数值 +1 
        // 最大值 是 库存
        $('.num').val($('.num').val() - 0 + 1 >= goodsMsg.goods_number ? goodsMsg.goods_number : $('.num').val() - 0 + 1);

    } else if (e.target.getAttribute('name') === 'inCart') {
        // 判断 有没有 登录

        // cookie方法
        // const cookieObj = myGetCookie();
        // if( cookieObj.login === undefined ){
        //   // 没有登录信息 跳转 登录页页面
        //   if( window.confirm('您还没有登录,点击确定跳转登录页面') ){
        //     // 跳转登录页 同时携带 当前页面的url地址
        //     window.location.href = `./login.html?url=${window.location.href}`;
        //   }
        // }else{
        //   // 已经登录 当前商品加入购物车 跳转 购物车页面
        // }


        // localStorage方法
        if (window.localStorage.login === undefined) {
            // 没有登录信息 跳转 登录页页面
            if (window.confirm('您还没有登录,点击确定跳转登录页面')) {
                // 跳转登录页 同时携带 当前页面的url地址
                window.location.href = `./login.html?url=${window.location.href}`;
            }
        } else {
            // 已经登录 当前商品加入购物车 

            // 判断 localStorage 中 有没有 购物车信息
            if (window.localStorage.cart === undefined) {
                // 没有 购物车 数据信息 也就是 没有创建 购物车
                // 给 localStorage 新增 购物车属性 cart 属性值是 当前商品的数据信息

                // 给 商品信息 添加属性 
                // 购买状态 默认购买
                goodsMsg.buy = true;
                // 购买数量 最小是1 最大是存储值

                if (!(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)) {
                    // 弹出提示内容
                    window.alert(`您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`);

                    // 终止之后的程序 商品信息不写入数据库
                    return;
                }

                // 添加购买数量属性
                goodsMsg.num = Number($('.num').val());



                // 将 当前商品信息 转化为json字符串 存储在 数组中 写入 localStorage 中
                window.localStorage.cart = JSON.stringify([goodsMsg]);

            } else {
                // 有购物车信息 购物车信息是 json字符串 需要先还原
                const cart = JSON.parse(window.localStorage.cart);

                if (cart.length === 0) {
                    //  当前购物车是个空车 也就是 cart 是一个空数组 
                    //  将 当前商品信息 写入 空数组 
                    //  新增商品 是 数组的起始位置

                    // 给当前商品新增属性属性值
                    // 购买状态 默认购买
                    goodsMsg.buy = true;
                    // 购买数量 最小是1 最大是存储值

                    if (!(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)) {
                        // 弹出提示内容
                        window.alert(`您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`);

                        // 终止之后的程序 商品信息不写入数据库
                        return;
                    }

                    // 添加购买数量属性
                    goodsMsg.num = Number($('.num').val());

                    // 在 数组的起始位置 新增商品信息
                    cart.unshift(goodsMsg);


                    // 将 新的数组cart 存储到 localStorage 中
                    window.localStorage.cart = JSON.stringify(cart);


                } else {
                    // 不是空数组 判断 当前 数组中 有没有 当前商品
                    // 在 cart 数组中 判断存储的对象中goods_id 和 当前商品 goodsMsg 的 goods_id 有没有相同的 

                    // 使用 some() 函数 判断 有没有 goods_id 相同的情况
                    let bool = cart.some(function (item) {
                        // item 是 当前数组中的对象 item.goods_id 是 商品的id主键值
                        // 当前商品是 goodsMsg , goodsMsg.goods_id 是 当前商品的id主键值
                        // 如果有一个相同 some() 执行结果 就是 true
                        return item.goods_id === goodsMsg.goods_id;
                    })
                    console.log(bool);

                    if (bool) {
                        // 如果 bool 是 true 证明 当前商品已经存在
                        // 给 goods_id 相同的 商品 添加 购买数量 
                        // 新增的购买数量 + 原始的购买数量 不能超过 库存值

                        for (let i = 0; i <= cart.length - 1; i++) {
                            // cart 是 存储商品的数组 i 是 数组的索引下标
                            // cart[i] 是 数组存储的 商品数据对象
                            // cart[i].goods_id 是 数组中存储商品的goods_id
                            // goodsMsg.goods_id 是 当前商品的goods_id
                            if (cart[i].goods_id === goodsMsg.goods_id) {
                                // 存储的商品 和 当前的商品 是 同一个商品
                                // 给 存储商品的购买数量 累加 新增的购买数量
                                // 当前商品是 cart[i]  购买数量是 cart[i].num
                                // 当前新增的购买数量是 Number($('.num').val())
                                // 累加之后 数值范围必须是 1 - 库存之间
                                if (!(cart[i].num + Number($('.num').val()) >= 1 && cart[i].num + Number($('.num').val()) <= cart[i].goods_number)) {
                                    // 弹出提示信息
                                    window.alert(`您只能输出 1 - ${cart[i].goods_number - cart[i].num}`);
                                    // return终止之后程序的操作
                                    return;
                                }

                                //  当前商品的购买数量 累加 新增的购买数量
                                cart[i].num += Number($('.num').val());

                                //  将 新的数组 转化为 json字符串 存储到 localStorage 中
                                window.localStorage.cart = JSON.stringify(cart);
                            }
                        }


                    } else {
                        // 如果 bool 是 false 证明 当前商品 不存在

                        // 给当前商品新增属性属性值
                        // 购买状态 默认购买
                        goodsMsg.buy = true;
                        // 购买数量 最小是1 最大是存储值

                        if (!(Number($('.num').val()) >= 1 && Number($('.num').val()) <= goodsMsg.goods_number)) {
                            // 弹出提示内容
                            window.alert(`您输入的商品数量有误,请您输入 1 - ${goodsMsg.goods_number} 范围内的数据`);

                            // 终止之后的程序 商品信息不写入数据库
                            return;
                        }

                        // 添加购买数量属性
                        goodsMsg.num = Number($('.num').val());

                        // 在 数组的起始位置 新增商品信息
                        cart.unshift(goodsMsg);


                        // 将 新的数组cart 存储到 localStorage 中
                        window.localStorage.cart = JSON.stringify(cart);

                    }

                }

            }


            // 跳转购物车页面
            window.location.href = './cart.html';
        }
    }

})


// 动态生成页面函数
async function setPage() {
    // 1, 获取地址栏数据信息
    const urlObj = myGetUrlVal();
    console.log(urlObj);



    // 2, 发送请求
    const res = await myPromiseJQueryAjax('./server/goods_detail.php', 'post', { goods_id: urlObj.goods_id }, 'json');
    console.log(res);

    // 3, 给全局变量赋值 
    goodsMsg = res;

    // 4, 动态渲染生成页面
    $('.product_image_area').html(`
    <div class="container">
    <div class="row s_product_inner">
      <div class="col-lg-6">
        <div>
        <img class="img-fluid" src="${res.goods_big_logo}" alt="">
      </div>
      </div>
      <div class="col-lg-5 offset-lg-1">
        <div class="s_product_text">
          <h3>${res.goods_name}</h3>
          <h2>$${res.goods_price}</h2>
          <!-- <ul class="list">
            <li><a class="active" href="#"><span>${res.cat_one_id}</span> : Household</a></li>
            <li><a href="#"><span>Availibility</span> : In Stock</a></li>
          </ul> -->
          <p>商品详情介绍</p>
          <div class="product_count">
            <label for="qty">Quantity:</label>
            <button name="+" class="increase items-count jian btn btn-default" type="button">➕</button>
            <input type="text"  value="1" title="Quantity:" class="num">
            <button name="-" class="reduced items-count jian btn btn-default" type="button">➖</button>
            <a class="button primary-btn btn btn-danger btn-lg" href="JavaScript:;"  name="inCart" >加入购物车</a>               
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ye">
    <ul class="nav nav-tabs dd">
      <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
      <li role="presentation"><a href="#">商品参数信息</a></li>
      <li role="presentation"><a href="#">相关商品</a></li>
    </ul>
  <div class="ddimg">
    ${res.goods_introduce}
  </div>
</div>
    `);

}

/*
 1,  动态生成页面内容
   获取 url地址栏数据参数 
   根据 传参 goods_id 向 PHP程序发送请求
     向 server/goods_detail.php 发送请求
       以 post方式 携带 1个参数 
       键名是 goods_id 
       响应体是 json 字符串
 
 2,  点击事件 
   通过事件委托语法形式 添加 点击事件

   超链接 form标签 默认效果是 点击跳转页面
   要执行JavaScript程序 
     要么 href的属性值是 JavaScript:;  
     要么 阻止默认事件执行

   (1) 加 / 减 
     最大值 不能 超过 库存
     最小值 不能 小于 1

     点击事件 要 判断 input标签中的数值 
     点击加入购物车 添加商品信息时 判断 input标签中的数值
 
   (2) 加入购物车
     a,  判断 有没有登录
       获取 cookie 或者 localStorage 中 登录状态码
       如果有 登录信息 执行 加入购物车 跳转购物车页面
       如果没有 登录信息 跳转 登录页面

     b,  将 当前商品信息 添加购物车
       实际项目中 应该是 向 数据库添加 商品信息
       当前是 向 localStorage 中 存储 购物车数据

       需要向当前商品信息中 添加属性属性值
         购买数量  input中的数据
         购买状态  true / false
         以 json字符串形式存储
         [ 商品1 , 商品2 , 商品3 ... ] 将这个数组整体转化为字符串 存储到 localStorage 中

       当前商品不存在 
         购物车 本身不存在 
           创建 购物车 同时 添加当前商品

         购物车 本身存在 商品不存在
           添加 当前商品 信息
 
         购物车 本身存在 商品也存在 没有当前商品
           添加 当前商品 信息

       当前商品存在 
         累加购买数量


     c,  跳转购物车页面



 总结: 新增购物车
   1,  localStorage 中 没有 购物车数据 也就是 没有 cart 键名
     给商品新增属性 购买状态 购买数量
       购买数量 是 1 - 库存 范围 
     将商品数据 存储在 数组中 [ 商品对象 ] 
     将 数组 转化为 json字符串 存储 到 localStorage中

   2,  localStorage 中 有 购物车数据 也就是 有 cart 键名 
     当前 localStorage.cart 中 存储的是 json 字符串
     将 localStorage.cart 还原为 对应的 数组结构

     2-1 结果 是 一个 空数组 也就是 这个数组中 没有存储 数据对象
       给商品新增属性 购买状态 购买数量
         购买数量 是 1 - 库存 范围 
       将 商品对象 添加到 数组的 起始位置
       将 数组 转化为 json字符串 存储 到 localStorage中

     2-2 结果 不是 一个 空数组 也就是 这个数组中 存储 数据对象
       使用 数组.some() 函数 判断 数组中存储的对象 goods_id 和 当前商品的 goods_id 有没有相同的
         如果 有 相同的goods_id 数组.some() 返回结果是 true
         如果 没有 相同的goods_id 数组.some() 返回结果是 false

         2-2-1 没有相同的 goods_id 证明 数组中 没有当前商品
           给商品新增属性 购买状态 购买数量
             购买数量 是 1 - 库存 范围 
           将 商品对象 添加到 数组的 起始位置
           将 数组 转化为 json字符串 存储 到 localStorage中

         2-2-2 有相同的 goods_id 证明 数组中 有当前商品
           通过循环遍历 找到 goods_id 相同的 商品对象
           判断 已经购买的数量 + 新增的购买数量 不能超过 库存值
           如果不超过 库存值 
             当前商品的购买数量 累加 新增的购买数量 
           将 数组 转化为 json字符串 存储 到 localStorage中
           

 前端程序优化
   1,  可操作性和可维护性 

   2,  减少对后端服务器的请求次数
     雪碧图
     函数的防抖节流
     标签的禁用

*/